<script setup lang="ts">
import {onMounted, ref, onBeforeMount} from "vue";
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";
import { datas } from './data'

// 用tm代替t，因为tm是响应式的而且可以解析对象
const {locale, setLocale, tm} = useI18n()

 const carousel_Images = computed(() => {
  return [
    {
        headImage: 'https://mdn.alipayobjects.com/huamei_e3pl6d/afts/img/A*BcudSJDdOzMAAAAAAAAAAAAADmOsAQ/original',
        subImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*VkU3TLM0yOoAAAAAAAAAAAAADmesAQ/fmt.webp'
    }
  ]
})

console.log(datas)


/**
 * 屏幕尺寸
 */
const screenSize = ref({width: 0, height: 0});


// 更新屏幕尺寸的方法
const updateScreenSize = () => {
  screenSize.value = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  // console.log("屏幕尺寸", screenSize.value.width)
};



onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
  // 初始化屏幕尺寸
  updateScreenSize();

})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});

</script>

<template>
  <v-app>
    <!-- 主图-->
     <banner-main
      themeColor="black"
      :isShowDoc="false"
      :lists="carousel_Images"
      title="一站式接入全球支付方式" 
      subTitle="支持电子钱包、银行卡、网银、国家网关等国际主流和本地常用的支付方式，让您的顾客使用他们熟悉且信赖的付款渠道，获得优质的支付体验。"
     ></banner-main>
     <v-sheet class="d-flex align-center justify-between w-8/12 mx-auto">
        <div class="text-[#413E3A] flex flex-col text-center">
          <span class="text-4xl text-[48px] font-semibold">40+</span>
          <span class="mt-5 text-[rgba(0,0,0,.6)] text-[20px]">市场</span>
        </div>
        <div class="text-[#413E3A] flex flex-col text-center">
          <span class="text-4xl text-[48px] font-semibold">数百种</span>
          <span class="mt-5 text-[rgba(0,0,0,.6)] text-[20px]">支付方式</span>
        </div>
        <div class="text-[#413E3A] flex flex-col text-center">
          <span class="text-4xl text-[48px] font-semibold">15亿</span>
          <span class="mt-5 text-[rgba(0,0,0,.6)] text-[20px]">消费账户</span>
        </div>
        <div class="text-[#413E3A] flex flex-col text-center">
          <span class="text-4xl text-[48px] font-semibold">100+</span>
          <span class="mt-5 text-[rgba(0,0,0,.6)] text-[20px]">交易币种</span>
        </div>
     </v-sheet>
     <v-sheet class="w-9/12 mx-auto mt-[40px]">
        <div class="d-flex flex-wrap">
            <div class="mt-20" v-for="(data,index) in datas" :key="index">
                <div class="mb-[40px] font-bold text-[28px]">{{ data.title }}</div>
                <div class="d-flex flex-wrap">
                    <a :href="item.href" target="_blank" v-for="(item) in data.list" :key="item.id" class="pb-10 h-[450px] item mr-[40px] shadow-[0 6px 10px 0 rgba(0,0,0,.04)] rounded-[24px] d-flex flex-column bg-[#f9fafb] w-[320px] mb-[40px] pt-[48px] px-[30px]">
                        <span class="font-bold text-[24px]">{{ item.title }}</span>
                        <span class="mb-[40px] mt-2 text-[rgba(0,0,0,.6)] text-[18px]">{{ item.subtitle }}</span>
                        <div class="text-[#7c8ca3] text-[18px] over4 min-h-[110px]">{{ item.desc }}</div>
                        <div class="self-end mt-20">
                            <v-img width="126px" height="58px" :src="item.img_src"></v-img>
                        </div>
                    </a>
                </div>

            </div>
        </div>

     </v-sheet>
    <footer-other></footer-other>

  </v-app>

</template>

<style scoped>
    .over4 {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .item:nth-child(4n) {
        @apply mr-0
    }
</style>